<include file="Public:header"/>
<form class="ajax-form" action="" method="post">
<div class="form_data">

	<include file="edit_option"/>

	<div class="ask-setting-box">
		<volist name="ask_data" id="list" key="i">
		<div class="ask-mod">
			<div class="mod_name">
				<span class="name">步骤<span class="serial_number">{$i}</span></span>
				<span class="input">
					<input type="text" class="step-field" field="title" name="step_data[{$i-1}][title]" placeholder="步骤名称，如基础资料填写" style="width:180px;" value="{$step_data[$i-1]['title']}">
					<span class="if if-edit show-hide step-field" field="desc_mod" name="step_data[{$i-1}][desc_mod]">步骤说明</span>
				</span>
				<span class="opt">
					<span class="btn if-delete">删除</span>
				</span>
			</div>
		
			<div class="mod_data hide step-field" field="desc_mod" name="step_data[{$i-1}][desc_mod]">
				<textarea class="step-field" field="description" name="step_data[{$i-1}][description]" style="width: 100%;" placeholder="请填写步骤页面解释说明">{$step_data[$i-1]['description']}</textarea>
			</div>
		
			<div class="data_list ask-option-data">
				<table>
					<thead>
						<tr>
							<th>序号</th>
							<th>类型</th>
							<th>标签</th>
							<th>问题</th>
							<th>描述</th>
							<th>默认值</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					<volist name="list" id="rs" key="k">
					<tr>
						<td>
							<span class="serial_number">{$k}</span>
						</td>
						<td>
							<select class="ask-field" field="type" name="ask_data[{$i-1}][{$k-1}][type]">
								<option value="text" <eq name="rs.type" value="text">selected</eq>>单行填空</option>
								<option value="textarea" <eq name="rs.type" value="textarea">selected</eq>>多行填空</option>
								<option value="date" <eq name="rs.type" value="date">selected</eq>>日期</option>
								<option value="radio" <eq name="rs.type" value="radio">selected</eq>>单选</option>
								<option value="checkbox" <eq name="rs.type" value="checkbox">selected</eq>>多选</option>
								<option value="select" <eq name="rs.type" value="select">selected</eq>>下拉选择</option>
								<option value="radio_text" <eq name="rs.type" value="radio_text">selected</eq>>单选填空</option>
								<option value="group_info" <eq name="rs.type" value="group_info">selected</eq>>组合信息</option>
								<option value="description" <eq name="rs.type" value="description">selected</eq>>描述信息</option>
							</select>
						</td>
						<td>
							{ <input type="text" class="ask-field" field="name" name="ask_data[{$i-1}][{$k-1}][name]" style="width:60px;" value="{$rs['name']}"> }
						</td>
						<td>
							<input type="text" class="ask-field" field="title" name="ask_data[{$i-1}][{$k-1}][title]" style="width:180px;" value="{$rs['title']}">
						</td>
						<td>
							<input type="text" class="ask-field" field="description" name="ask_data[{$i-1}][{$k-1}][description]" placeholder="描述信息" style="width: 180px;" value="{$rs['description']}">
						</td>
						<td>
							<textarea class="ask-field" field="content" name="ask_data[{$i-1}][{$k-1}][content]" readonly>{$rs['content']}</textarea>
						</td>
						<td>
							<i class="if if-add"></i>
							<i class="if if-delete"></i>
						</td>
					</tr>
					</volist>
					</tbody>
				</table>
			</div>
		</div>
		
		</volist>
	</div>
	
	<div class="mod_submit">
		<button type="submit" class="btn btn-save">保存</button>
		<button class="btn btn-back">返回</button>
	</div>
</div>
</form>
<style type="text/css">
.ask-mod{
	background-color: #FFF;
}
.ask-option-data .if{
	cursor: pointer;
}
.mod_name .input{
	position: relative;
    bottom: -5px;
    overflow: hidden;
}
.mod_name .input .if{
	cursor: pointer;
}
</style>
<script type="text/tpl" id="add-ask-tpl">
	<tr>
		<td>
			<span class="serial_number">1</span>
		</td>
		<td>
			<select class="ask-field" field="type">
				<option value="text">单行填空</option>
				<option value="textarea">多行填空</option>
				<option value="date">日期</option>
				<option value="radio">单选</option>
				<option value="checkbox">多选</option>
				<option value="select">下拉选择</option>
				<option value="radio_text">单选填空</option>
				<option value="group_info">组合信息</option>
				<option value="description">描述信息</option>
			</select>
		</td>
		<td>
			{<input type="text" class="ask-field" field="name" style="width:60px;" />}
		</td>
		<td>
			<input type="text" class="ask-field" field="title" style="width:180px;">
		</td>
		<td>
			<input type="text" class="ask-field" field="description" placeholder="描述信息" style="width: 180px;">
		</td>
		<td>
			<textarea class="ask-field" field="content" readonly></textarea>
		</td>
		<td>
			<i class="if if-add"></i>
			<i class="if if-delete"></i>
		</td>
	</tr>
</script>
<script type="text/tpl" id="ask-mod-tpl">
	<div class="ask-mod">
		<div class="mod_name">
			<span class="name">步骤<span class="serial_number">1</span></span>
			<span class="input">
				<input type="text" class="step-field" field="title" placeholder="步骤名称，如基础资料填写" style="width:180px;">
				<span class="if if-edit show-hide step-field" field="desc_mod">步骤说明</span>
			</span>
			<span class="opt">
				<span class="btn if-delete">删除</span>
			</span>
		</div>

		<div class="mod_data hide step-field" field="desc_mod">
			<textarea class="step-field" field="description" style="width: 100%;" placeholder="请填写步骤页面解释说明"></textarea>
		</div>

		<div class="data_list ask-option-data">
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>类型</th>
						<th>标签</th>
						<th>问题</th>
						<th>描述</th>
						<th>默认值</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<span class="serial_number">1</span>
						</td>
						<td>
							<select class="ask-field" field="type">
								<option value="text">单行填空</option>
								<option value="textarea">多行填空</option>
								<option value="date">日期</option>
								<option value="radio">单选</option>
								<option value="checkbox">多选</option>
								<option value="select">下拉选择</option>
								<option value="radio_text">单选填空</option>
								<option value="group_info">组合信息</option>
								<option value="description">描述信息</option>
							</select>
						</td>
						<td>
							{<input type="text" class="ask-field" field="name" style="width:60px;" />}
						</td>
						<td>
							<input type="text" class="ask-field" field="title" style="width:180px;">
						</td>
						<td>
							<input type="text" class="ask-field" field="description" placeholder="描述信息" style="width: 180px;">
						</td>
						<td>
							<textarea class="ask-field" field="content" readonly></textarea>
						</td>
						<td>
							<i class="if if-add"></i>
							<i class="if if-delete"></i>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</script>
<style type="text/css">
textarea[field="content"]{
	width: 180px;
	height: 15px;
	padding-top: 5px
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	// 添加选项
	$('.ask-option-data .if-add').live('click', function () {
		var tr_data = $('#add-ask-tpl').html();
		$(this).parent().parent().after(tr_data);
		re_set();
	});
	// 删除选项
	$('.ask-option-data .if-delete').live('click', function () {
		var step_num   = $('.ask-mod').size();
		var option_num = $(this).parent().parent().parent().parent().find('.serial_number').size();
		if(option_num > 1){
			$(this).parent().parent().remove();
		}else{
			if(step_num > 1){
				$(this).parent().parent().parent().parent().parent().parent().remove();
			}else{
				msgbox('必须有一个选项！', 'error');
			}
		}
		re_set();
	});
	// 添加步骤
	$('.mod_name .opt .if-add').live('click', function () {
		var data = $('#ask-mod-tpl').html();
		$('.form_data .mod_submit').before(data);
		re_set();
		// 设置表格拖拉排序
		sortable();
	});
	// 删除步骤
	$('.mod_name .if-delete').live('click', function () {
		if($('.ask-mod').size() > 1){
			$(this).parent().parent().parent().remove();
		}else{
			msgbox('必须有一个步骤！', 'error');
		}
		re_set();
	});
	$('.mod_name .input .show-hide').live('click', function () {
		var to_class = $(this).attr('name');
		$('.mod_data[name="' + to_class + '"]').slideToggle();
	});
	// 设置表格拖拉排序
	sortable();
	$('textarea[field="content"]').live('click', function () {
		var here    = $(this);
		var content = $(this).val();
		var html    = '<textarea style="margin:0px 10px;width:360px">' + content + '</textarea>';
			html   += '<div style="margin:0px 10px;color:#FD8920;padding-top:5px;">注：多个以回车换行分开</div>';
			html   += '<div class="win-opt-box">';
			html   += '<span class="btn btn-confirm confirm-input-textarea">确定</span> ';
			html   += '<span class="btn btn-cancel removeWin">取消</span>';
			html   += '</div>';
			html   += '<style> #winBodyContainer{width:400px;height:200px;padding:0px;padding-top:10px;padding-bottom:30px;} </style>';
		$.win_info('', html, '修改');
		$('.confirm-input-textarea').click(function () {
			var content = $('#winBodyContainer textarea').val();
			here.val(content);
			$.winRemove();
		})
	})
})
function sortable () {
	$( ".data_list table tbody,.ask-setting-box" ).sortable({
		update : function( event, ui ) {
			re_set();
		}
	});
}
function re_set () {
	// 设置选项序号
	$('.form_data .ask-option-data').each(function (k) {
		$(this).find('.serial_number').each(function (i) {
			$(this).text(i + 1);
		});
		// 设置选项字段名称
		var a = 0;
		var set_if_field = '';
		$(this).find('.ask-field').each(function (i) {
			var field = $(this).attr('field');
			if(i == 0){
				set_if_field = field;
			}
			if(set_if_field == field && i > 0){
				a++;
			}
			var name  = "ask_data[" + k + "][" + a + "][" + field + "]";
			$(this).attr('name', name);
		});
	});
	// 设置步骤序号
	$('.form_data .ask-mod .mod_name').each(function (i) {
		$(this).find('.serial_number').text(i + 1);
	});
	// 设置步骤字段名称
	$('.form_data .ask-mod').each(function (i) {
		$(this).find('.step-field').each(function (k) {
			var field = $(this).attr('field');
			var name  = "step_data[" + i + "][" + field + "]";
			$(this).attr('name', name);
		});
	});
}
</script>
<include file="Public:footer"/>